<template>
  <el-drawer
    append-to-body
    :visible.sync="editorVisible"
    title="预览JSON"
    size="800px"
  >
    <div style="padding: 15px 30px;">
      <el-button size="small" @click="editorVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="saveJSON">确 定</el-button>
    </div>
    <jsoneditor ref="jsoneditor" />
  </el-drawer>
</template>

<script>
import jsoneditor from '@/components/jsoneditor'
import { mapMutations, mapState } from 'vuex'
export default {
  components: {
    jsoneditor
  },
  data() {
    return {
      editorVisible: false
    }
  },
  computed: {
    ...mapState('tableDesign', ['option'])
  },
  methods: {
    ...mapMutations('tableDesign', ['SET_OPTION']),
    saveJSON() {
      this.SET_OPTION('input', this.$refs['jsoneditor'].editor.get())
      this.editorVisible = false
    },
    show() {
      this.editorVisible = true
      this.$nextTick(() => {
        this.$refs['jsoneditor'].editor.set(this.option)
      })
    }
  }
}
</script>

<style>

</style>
